<template>
	<!-- 发布找活 -->

	<view class="content">
		<u-form :model="form" ref="uForm">
			<u-form-item label="招工类型" label-width='100px'>
				<u-input v-model="form.recruitment_type" input-align="right" placeholder="请选择" disabled="true"
					type="select" @click="settlementShow=true" />
				<u-picker mode="selector" v-model="settlementShow"  :default-selector="[0]" :range="workLsit" range-key="label" @confirm="recruitmentType"></u-picker>
			</u-form-item>
			<u-form-item label="工种类型" label-width='100px'>
				<u-input v-model="form.work_type" input-align="right" placeholder="请选择" disabled="true" type="select"
					@click="jobShow=true" />
				<u-picker mode="selector" v-model="jobShow"  :default-selector="[0]" :range="jobList" range-key="label" @confirm="workType"></u-picker>
			</u-form-item>
			<u-form-item label="招工人数" label-width='100px'>
				<u-input v-model="form.number" placeholder="请输入" input-align="right" />
			</u-form-item>
			<u-form-item label="招工地点" label-width='100px'>
				<u-input v-model="form.area" input-align="right" placeholder="请选择" disabled="true" type="select"
					@click="areaShow=true" />
				<u-select v-model="areaShow" mode="mutil-column-auto" :list="cityList" @confirm="cityName"></u-select>
			</u-form-item>

			<u-form-item label="招工要求" label-width='100px'>
				<u-input v-model="form.requirement" type="textarea" placeholder="请输入" input-align="right" />
			</u-form-item>
			<u-form-item label="结算方式" label-width='100px'>
				<u-input v-model="form.settlement_method" input-align="right" placeholder="请选择" disabled="true"
					type="select" @click="recruitmentShow=true" />
				<u-picker mode="selector" v-model="recruitmentShow"  :default-selector="[0]" :range="settlementList" range-key="label" @confirm="settlementName"></u-picker>
			</u-form-item>
			<u-form-item label="发布周期" label-width='100px'>
				<u-input v-model="form.recruitment_cycle" disabled="true" placeholder="请选择" type="select"
					input-align="right" @click="cycleShow=true" />
				<u-picker mode="selector" v-model="cycleShow"  :default-selector="[0]" :range="cycleList" range-key="label" @confirm="cycleConfirm"></u-picker>
			</u-form-item>
			<u-form-item>
				<u-checkbox-group @change="checkboxGroupChange">
					<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list"
						:key="index" :name="item.name">{{item.value}}</u-checkbox>
				</u-checkbox-group>
			</u-form-item>
			<u-form-item label="联系人" label-width='100px'>
				<u-input v-model="form.contacts" placeholder="请输入" input-align="right" />
			</u-form-item>
			<u-form-item label="联系方式" label-width='100px'>
				<u-input v-model="form.contacts_method" placeholder="请输入" input-align="right" />
			</u-form-item>
		</u-form>
		<view class="footer">
			<div class="foot" @click="cancel()">取消</div>
			<div class="foot_ter" @click="submit">提交</div>
		</view>
	</view>

</template>

<script>
	import api from '@/static/js/api.js'
	import request from '@/static/js/request.js'
	export default {
		data() {
			return {
				list: [{
						value: '日结',
						name:1,
						checked: false,
						disabled: false
					},
					{
						value: '月结',
						name:2,
						checked: false,
						disabled: false
					},
					{
						value: '包吃住',
						name:3,
						checked: false,
						disabled: false
					},
					{
						value: '包吃',
						name:4,
						checked: false,
						disabled: false
					},
					{
						value: '包住',
						name:5,
						checked: false,
						disabled: false
					},
					{
						value: '需证书',
						name:6,
						checked: false,
						disabled: false
					}
				],
				label_id:[],
				form: {
					recruitment_type: "",
					work_type: "",
					work_type_id: '',
					recruitment_cycle: '',
					requirement: '',
					number: '',
					area: '',
					userInfo: '',
					contacts: '',
					contacts_method: '',
					settlement_method: '',
					label_ids: '',
					label_name: ''

				},
				mode: 'date',
				jobShow: false,
				areaShow: false,
				cycleShow: false,
				settlementShow: false,
				recruitmentShow: false,
				labelShow: false,
				workLsit: [{
						value: '1',
						label: '个人'
					},
					{
						value: '2',
						label: '班组'
					}, {
						value: '3',
						label: '企业'
					}
				],
				cycleList: [{
						value: '1',
						label: '今天'
					},
					{
						value: '2',
						label: '3天'
					}, {
						value: '3',
						label: '7天'
					}

				],
				settlementList: [{
						value: '1',
						label: '工时'
					},
					{
						value: '2',
						label: '工程量'
					}, {
						value: '3',
						label: '固定'
					}

				],
				labelList: [{
						value: '1',
						label: '日结'
					},
					{
						value: '2',
						label: '月结'
					}, {
						value: '3',
						label: '包吃住'
					},
					{
						value: '4',
						label: '包吃'
					},
					{
						value: '5',
						label: '包住'
					}, {
						value: '6',
						label: '需证书'
					}
				],
				jobList: [],
				cityList: [],
				province_id: '',
				city_id: '',
				area_id: '',
			}
		},
		onShow() {
			this.userinfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.cityListMethod()
			this.tageMethod()
		},
		methods: {
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				// console.log(e);
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				this.label_id = e.toString()
				//'1,2,3,4,5,6'
				// console.log(this.label_id);
			},
			beginTime() {
				this.beginShow = true
			},
			endTime() {
				this.endShow = true
			},
			changeBegin(e) {
				console.log(e)
				this.form.begin_date = e.result
			},
			changeEnd(e) {
				this.form.end_date = e.result
			},
			cycleConfirm(e) {
				console.log(e)
				this.form.recruitment_cycle = this.cycleList[e[0]].label
			},
			workType(e) {
				this.form.work_type = this.jobList[e[0]].label
				this.form.work_type_id = this.jobList[e[0]].value
			},
			recruitmentType(e) {
				this.form.recruitment_type = this.workLsit[e[0]].label
			},
			settlementName(e) {
				this.form.settlement_method = this.settlementList[e[0]].label
			},
			labelConfirm(e) {
				this.form.label_ids = e[0].value
				this.form.label_name = e[0].label
			},
			cityName(e) {
				console.log(e, '999999999999')
				if (e[0].label == e[1].label) {
					this.form.area = e[0].label + ' ' + e[2].label
				} else {
					this.form.area = e[0].label + ' ' + e[1].label + ' ' + e[2].label
				}
				this.province_id = e[0].value
				this.city_id = e[1].value
				this.area_id = e[2].value
			},
			cityListMethod() {
				api.cityApi('res.country.state', '_api_get_information_in_bulk_area', this.userinfo.access_token).then(
					res => {
						let objData = res.data.tag
						for (let key in objData) {
							let obj = {}
							obj.value = objData[key]
							obj.label = key
							this.jobList.push(obj)
						}
						this.cityList = res.data

					}).catch(e => {
					uni.showToast({
						icon: 'none',
						title: e.message
					})
				})
			},
			tageMethod() {
				api.cityApi('res.country.state', '_api_get_information_in_bulk_area_reverse', this.userinfo.access_token)
					.then(
						res => {
							let objData = res.data.tag
							for (let key in objData) {
								let obj = {}
								obj.value = objData[key]
								obj.label = key
								this.jobList.push(obj)
							}
						}).catch(e => {
						uni.showToast({
							icon: 'none',
							title: e.message
						})
					})
			},
			submit() {
				let data = {
					model: "jhj.recruitment.release",
					function_name: "_api_jhj_recruitment_release",
					access_token: this.userinfo.access_token,
					uid: this.userinfo.uid,
					partner_id: this.userinfo.partner_id,
					location_company_id: this.userinfo.location_company_id == false ? '' : this.userinfo
						.location_company_id,
					recruitment_type: this.form.recruitment_type,
					work_type: this.form.work_type_id,
					number: this.form.number,
					city_id: this.city_id,
					area_id: this.area_id,
					settlement_method: this.form.settlement_method,
					requirement: this.form.requirement,
					recruitment_cycle: this.form.recruitment_cycle,
					// label_ids: this.form.label_ids,
					label_ids: this.label_id,
					contacts: this.form.contacts,
					contacts_method: this.form.contacts_method
				};
				if (data.recruitment_type == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择招工类型'
					})
					return
				}
				if (data.work_type == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择招工工种'
					})
					return
				}
				if (data.number == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写招工人数'
					})
					return
				}
				if (data.city_id == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择招工地点'
					})
					return
				}
				if (data.settlement_method == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择结算方式'
					})
					return
				}
				if (data.requirement == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写招工要求'
					})
					return
				}
				if (data.recruitment_cycle == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择发布周期'
					})
					return
				}
				if (data.label_ids == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择标签'
					})
					return
				}
				if (data.contacts == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写联系人'
					})
					return
				}
				if (data.contacts_method == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写联系方式'
					})
					return
				}
				request.post('/api/v1/getattr/0', data).then(resp => {
					uni.switchTab({
						url: '/pages/main/mine'
					})
				}).catch(e => {
					uni.showToast({
						icon: 'none',
						title: e.message
					})
				})
			},
			cancel() {
				uni.switchTab({
					url: "/pages/main/mine"
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.content {
		padding: 20rpx 20rpx;

		.footer {
			display: flex;
			justify-content: center;
			margin-top: 30rpx;

			.foot,
			.foot_ter {
				padding: 15rpx 40rpx;
				border: 2rpx solid #DD524D;
				border-radius: 10rpx;
				font-size: 30rpx;
			}

			.foot {
				color: #DD524D;
			}

			.foot_ter {
				margin-left: 20rpx;
				background-color: #DD524D;
				color: #FFFFFF;

			}
		}
		/deep/.u-checkbox-group{
			display: flex;
			flex-wrap: wrap;
			// justify-content: flex-end;
		}
	}
</style>
